<template>
	<div id="app">
		<router-view></router-view>
		<tab-bar>
			<tab-bar-item path="/home" active-color="#1296db">
				<!-- 当我们在行内添加背景图时，背景图对应的路径不会触发打包 -->
				<!-- 使用动态绑定的方式结合require 方法，来触发打包 -->
				<!-- <span :style="{backgroundImage:'url('+require('ast/images/home.svg')+')'}" alt=""></span> -->
				<img slot="icon" src="~ast/images/home.svg" alt="">
				<img slot="icon-on" src="~ast/images/home-on.svg" alt="">
				<p slot="text">首页</p>
			</tab-bar-item>
			<tab-bar-item path="/cat" active-color="#1296db">
				<!-- <span :style="{backgroundImage:'url('+require('ast/images/cat.svg')+')'}" alt=""></span> -->
				<img slot="icon" src="~ast/images/cat.svg" alt="">
				<img slot="icon-on" src="~ast/images/cat-on.svg" alt="">
				<p slot="text">分类</p>
			</tab-bar-item>
			<tab-bar-item path="/cart" active-color="#1296db">
				<!-- <span :style="{backgroundImage:'url('+require('ast/images/cart.svg')+')'}" alt=""></span> -->
				<img slot="icon" src="~ast/images/cart.svg" alt="">
				<img slot="icon-on" src="~ast/images/cart-on.svg" alt="">
				<p slot="text">购物车</p>
			</tab-bar-item>
			<tab-bar-item path="/my" active-color="#1296db">
				<img slot="icon" src="~ast/images/my.svg" alt="">
				<img slot="icon-on" src="~ast/images/my-on.svg" alt="">
				<!-- <span :style="{backgroundImage:'url('+require('ast/images/my.svg')+')'}" alt=""></span> -->
				<p slot="text">我的</p>
			</tab-bar-item>
		</tab-bar>
	</div>
</template>

<script>
import TabBar from "cmps/tabBar/TabBar.vue"
import TabBarItem from "cmps/tabBar/TabBarItem.vue"
export default {
	components:{
		TabBar,TabBarItem
	}
}
</script>

<style lang="less">
body{
    width: 7.5rem;
    background-color: #eee;
}
</style>
